import {Component, EventEmitter, HostListener, OnInit, Output} from '@angular/core';
import {ToolBarFunc} from '../../entity/tool-bar-func';
import {BaseComponent} from '../../entity/base-component';
import {MapPluginsService} from '../../service/map-plugins.service';
import {ZoomExtentComponent} from '../../funcs/zoom-extent/zoom-extent.component';

@Component({
    selector: 'sb-top-right-toolbar',
    templateUrl: './top-right-toolbar.component.html',
    styleUrls: ['./top-right-toolbar.component.less']
})
export class TopRightToolbarComponent implements OnInit, BaseComponent {
    /**
     * 是否显示 第二层
     */
    showSecond: boolean;

    firstFuncs: ToolBarFunc[] = [
        {
            component: 'func/sbMapMeasure',
            class: 'measure',
            name: '测距',
            param: {type: 1}
        }, {
            component: 'func/sbMapMeasure',
            name: '测面',
            class: 'measureArea',
            param: {type: 2}
        }, {
            component: 'func/sbMapZoom',
            name: '放大',
            class: 'zoomin',
            param: {type: 1}
        }, {
            component: 'sb-zoom-extent-in',
            name: '缩小',
            class: 'zoomout',
            param: {type: 2}
        }, {
            component: 'func/sbMapFull',
            name: '全图',
            class: 'global',
        }, {
            component: 'func/sbMapFullScreen',
            name: '全屏',
            class: 'fullscreen',
        }, {
            component: 'func/sbMapClear',
            class: 'clean',
            name: '清除',
        }];

    secondFuncs: ToolBarFunc[] = [
        {
            component: 'func/sbMapState',
            name: '前一视图',
            class: 'small-prev',
            param: {type: 'prev'}
        }, {
            component: 'func/sbMapState',
            name: '后一视图',
            class: 'small-next',
            param: {type: 'next'}
        }, {
            component: 'func/sbMapCompare',
            name: '多屏对比',
            class: 'small-multi',
        }, {
            component: 'func/sbMapLocatesManage',
            name: '标注管理',
            class: 'small-locate',
        }, {
            component: 'func/sbMapPrint',
            name: '打印',
            class: 'small-print',
        }, {}];
    @Output()
    closeEvent = new EventEmitter<any>();

    constructor(private mapPluginsService: MapPluginsService) {
    }

    triggerClose() {
        this.closeEvent.emit();
    }

    showMoreClick(event: Event) {
        this.showSecond = !this.showSecond;
        event.stopPropagation();
    }

    funcClick(func: ToolBarFunc) {
        if (func.component === 'sb-zoom-extent-in') {
            this.mapPluginsService.loadComponent(ZoomExtentComponent);
        }
    }

    @HostListener('document:click')
    documentClick() {
        this.showSecond = false;
    }

    ngOnInit(): void {
    }

}
